<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="box-card">
        <el-header>
          <el-row type="flex" justify="">
            <el-col>
              <el-button v-if="assignPrem('addkehu')" type="primary" @click="visibleFn('添加客户')">添加客户</el-button>
            </el-col>
            <el-col>
              <el-input v-model="value" placeholder="请输入内容" class="input-with-select">
                <el-select slot="prepend" v-model="search" placeholder="全部经纪人">
                  <el-option
                    label="全部经纪人"
                    value=""
                  />
                  <el-option
                    v-for="item in select"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
                <el-button slot="append" @click="searchFn">筛选</el-button>
              </el-input>
            </el-col>
          </el-row>
        </el-header>
        <hr>
        <div class="app-container">
          <el-table
            v-loading="loading"
            :data="tableData"
            style="width: 100%"
          >
            <el-table-column
              prop="image"
              label="头像"
            >
              <template v-slot="{row}">
                <img :src="row.image">
              </template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="名称"
            />
            <el-table-column
              prop="email"
              label="邮箱"
            />
            <el-table-column
              prop="phone"
              label="电话"
            />
            <el-table-column
              prop="agent.name"
              label="经济人"
            />
            <el-table-column
              prop="wechat"
              label="微信"
            />
            <el-table-column
              prop="desc"
              label="介绍"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="操作"
              width="150"
            >
              <template v-slot="{row}">
                <el-button
                  v-if="assignPrem('editbianji')"
                  size="mini"
                  @click="visibleFn('编辑客户',row.id)"
                >编辑</el-button>
                <el-button
                  v-if="assignPrem('delkehu')"
                  size="mini"
                  type="danger"
                  @click="del(row.id)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-row type="flex" justify="center" class="block">
            <el-pagination
              :current-page="page"
              :page-sizes="[8, 16, 24, 32]"
              :page-size="size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </el-row>
        </div>
      </el-card>
      <EditKehu
        ref="editkehu"
        :visible.sync="visible"
        :select="select"
        :title="title"
        @getKehuInfoFn="getKehuInfoFn(size, page )"
      />
    </div>
  </div>
</template>

<script>
import { getKehuInfo, getKehuCount, delKehuById } from '@/api/kehu'
import { getAgentsList } from '@/api/agents'
import EditKehu from './editKehu.vue'
export default {
  components: {
    EditKehu
  },
  data() {
    return {
      total: 0,
      page: 1,
      size: 8,
      title: '',
      tableData: [],
      search: '',
      select: [],
      value: '',
      visible: false,
      loading: false,
      delShow: false,
      nomagic: false
    }
  },
  async created() {
    this.getKehuInfoFn(this.size, this.page)
    this.getAgentsListFn()
    this.total = await getKehuCount()
  },
  methods: {
    async getKehuInfoFn(size, page, search, value) {
      this.loading = true
      const res = await getKehuInfo(size, 0 + size * (page - 1), search, value)
      console.log('获取客户列表137', res)
      this.tableData = res
      this.loading = false
      // this.total = await getKehuCount()
    },
    async getAgentsListFn() {
      const res = await getAgentsList(10000, 0)
      console.log('经纪人列表', res)
      this.select = res
    },
    visibleFn(val, id) {
      this.visible = true
      this.title = val
      if (val === '编辑客户') {
        console.log(id)
        this.$refs.editkehu.seeKehuByIdFn(id)
      }
    },
    async  handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.size = val
      if (!this.nomagic) {
        await this.getKehuInfoFn(this.size, this.page)
      } else {
        await this.searchs()
      }
    },
    async  handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.page = val
      if (!this.nomagic) {
        await this.getKehuInfoFn(this.size, this.page)
      } else {
        await this.searchs()
      }
    },
    async del(id) {
      console.log('删除')
      if (confirm('确定删除吗?')) {
        await delKehuById(id)
        if (!this.nomagic) {
          await this.getKehuInfoFn(this.size, this.page)
        } else {
          await this.searchs()
        }
      }
    },
    // 筛选
    async searchFn() {
      this.page = 1
      this.nomagic = true
      this.searchs()
    },
    // 分情况搜索
    async searchs() {
      if (!this.value && !this.search) {
        await this.getKehuInfoFn(this.size, this.page)
        this.total = await getKehuCount()
      } else {
        if (!this.value && this.search) {
          await this.getKehuInfoFn(this.size, this.page, null, this.search)
          this.total = await getKehuCount(null, this.search)
        } else if (!this.search && this.value) {
          await this.getKehuInfoFn(this.size, this.page, this.value, null)
          this.total = await getKehuCount(this.value, null)
        } else if (this.value && this.search) {
          await this.getKehuInfoFn(this.size, this.page, this.value, this.search)
          this.total = await getKehuCount(this.value, this.search)
        }
      }
    }
  }
}
</script>

<style  lang="scss">
.el-select .el-input {
    width: 120px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }

.cell{
  img{
    width: 100%;
    height: 100%;
  }
}
</style>
